<!DOCTYPE html>
<html>
<head>
    <include file="Public/head"/>

    <script type="text/javascript">
        function trace(data){
            console.log(data);
        }
        //改变数量
        function changenum(diff) {
            trace('点击了增减按钮');
            var num = parseInt(document.getElementById('goods_number').value);//获取数量值
            var goods_number = num + Number(diff);
            if( goods_number >= 1){
                document.getElementById('goods_number').value = goods_number;//更新数量
                changeTotalPrice(goods_number);
//                    changePrice();
            }
        }

        //改变总价
        function changeTotalPrice(number){
            var price = {$info.price};
            trace('price='+price);
            document.getElementById("ECS_GOODS_AMOUNT").innerText = number*price;
        }

        $(function() {
            // 筛选商品属性
            $(".info").click(function(){
                $('.goodsBuy .fields').slideToggle("fast");
            });



        });

    </script>
</head>
<body>
<header id="header">
    <div class="header_l header_return"> <a class="ico_10"  href="javascript:history.go(-1);"> 返回 </a> </div>
    <h1> 商品详情 </h1>
    <!--<div class="header_r header_search"> <a class="ico_15" href="ectouch.php?act=share&content=玫琳凯中性洗面乳绿2号&pic=images/201311/source_img/122_G_1385665161828.png"> 分享 </a> </div>-->
</header>

<script src="__JS__/TouchSlide.js"></script>
<section class="goods_slider">
    <div class="blank2"></div>
    <div id="slideBox" class="slideBox">
        <div class="scroller">
            <!--<div><a href="javascript:showPic()"><img src="images/201311/thumb_img/122_thumb_G_1385665161614.jpg"  alt="玫琳凯中性洗面乳绿2号" /></a></div>-->
            <ul>
                <volist name="info['images']" id="img">
                    <li><a href="javascript:showPic()"><img alt="" src="{$img.path}"/></a></li>
                </volist>

            </ul>
        </div>
        <div class="icons">
            <ul>
                <i class="current"></i>


                <i class="current"></i>

            </ul>
        </div>
    </div>
    <div class="blank2"></div>
</section>
<script type="text/javascript">
    TouchSlide({
        slideCell:"#slideBox",
        titCell:".icons ul", //开启自动分页 autoPage:true ，此时设置 titCell 为导航元素包裹层
        mainCell:".scroller ul",
        effect:"leftLoop",
        autoPage:true,//自动分页
        autoPlay:false //自动播放
    });
    function showPic(){
        var data = document.getElementById("slideBox").className;
        var reCat = /ui-gallery/;
        //str1.indexOf(str2);
        if( reCat.test(data) ){
            document.getElementById("slideBox").className = 'slideBox';
        }else{
            document.getElementById("slideBox").className = 'slideBox ui-gallery';
            //document.getElementById("slideBox").style.position = 'fixed';
        }
    }
</script>

<section class="goodsInfo">
    <!--<a class="collect" id="collect_box" href="javascript:collect(122)" style="display: inline;"></a>-->
    <div class="title">
        <h1 style="font-weight: 700;font-family: arial,'microsoft yahei';font-size: 16px;"> {$info.title} </h1>
        <h3 style="    font-family: arial,'microsoft yahei';color: #e3393c;font-size: 14px;line-height: 20px;word-break: break-all;"> {$info.subtitle} </h3>
    </div>
    <ul>
        <li>售价：<b class="price" style="    color: #e4393c;font-size: 20px;">￥<span>{$info.price}</span></b>
        </li>

        <!--<li>注册用户：<b class="price" id="ECS_RANKPRICE_1">￥<span>69</span></b></li>-->
        <!--<li>vip：<b class="price" id="ECS_RANKPRICE_2">￥<span>66</span></b></li>-->
        <!--<li>微信用户：<b class="price" id="ECS_RANKPRICE_99">￥<span>69</span></b></li>-->
    </ul>

    <ul>
        <li>月销量：{$info.sales}件</li>
    </ul>
</section>
<div class="wrap">
    <section class="goodsBuy radius5">
        <input id="goodsBuy-open" type="checkbox">
        <label class="info" for="goodsBuy-open">
            <div>请选择<span></span><i></i></div>
            <div class="selected"> </div>
        </label>
        <form action="{:U('Cart/update')}" method="post" name="ECS_FORMBUY" id="ECS_FORMBUY" >
            <div class="fields" style="display:block;">
                <ul class="ul1">
                    <li>商品总价：<span id="ECS_GOODS_AMOUNT" class="price">{$info.price}</span></li>
                </ul>
                <ul class="ul2">
                </ul>
                <ul class="quantity">
                    <h2>数量：</h2>
                    <div class="items">
                        <span class="ui-number radius5">
                            <button type="button" class="decrease radius5" onclick="changenum(- 1)">-</button>
                            <input class="num" name="number" id="goods_number" autocomplete="off" value="1" min="1"  type="number" />
                            <button type="button" class="increase radius5" onclick="changenum(1)">+</button>
                        </span>
                    </div>
                </ul>
            </div>
            <div class="option" >
                <script type="text/javascript">
                    function showDiv(){
                        document.getElementById('popDiv').style.display = 'block';
                        document.getElementById('hidDiv').style.display = 'block';
                        document.getElementById('cartNum').innerHTML = document.getElementById('goods_number').value;
                        document.getElementById('cartPrice').innerHTML = document.getElementById('ECS_GOODS_AMOUNT').innerHTML;
                    }
                    function closeDiv(){
                        document.getElementById('popDiv').style.display = 'none';
                        document.getElementById('hidDiv').style.display = 'none';
                    }
                </script>
                <input hidden="hidden" name="goods_id" value="{$info.id}">
                <input hidden="hidden" name="goods_title" value="{$info.title}">
                <input hidden="hidden" name="price" value="{$info.price}">
                <button type="submit" class="btn buy radius5" >立即购买</button>
                <button type="submit" class="btn cart radius5" ><div class="ico_01"></div>加入购物车</button>
            </div>
        </form>


    </section>
    <!--<div class="guarantee">微信支付商家,正品保证,假一罚三,七天无条件退换货。</div>-->
</div>
<script type="text/javascript">
    //介绍 评价 咨询切换
    var tab_now = 1;
    function tab(id){
        document.getElementById('tabs' + tab_now).className = document.getElementById('tabs' + tab_now).className.replace('current', '');
        document.getElementById('tabs' + id).className = document.getElementById('tabs' + id).className.replace('', 'current');
        tab_now = id;
        if (id == 1) {
            document.getElementById('tab1').className = '';
            document.getElementById('tab3').className = 'hidden';
        }else if (id == 2) {
            document.getElementById('tab1').className = 'hidden';
            document.getElementById('tab3').className = 'hidden';
        }else if (id == 3) {
            document.getElementById('tab1').className = 'hidden';
            document.getElementById('tab3').className = '';
        }
    }
</script>
<section class="s-detail">
    <header>
        <ul style="position: static;" id="detail_nav">
            <li id="tabs1" onClick="tab(1)" class="current"> 详情 </li>
            <!--<li id="tabs2" onClick="tab(2)" class=""> 评价 <span class="review-count">(0)</span> </li>-->
            <li id="tabs3" onClick="tab(3)" class=""> 热销 </li>
        </ul>
    </header>
    <div id="tab1" class="">
        <div class="desc wrap">
            <div class="blank2"></div>
            {$info.content}
        </div>
    </div>

    <div id="tab3" class="hidden">
        <div class="wrap">
            <ul class="m-recommend ">
                <div class="blank2"></div>
                <goods:position pos="16" cate="null" limit="6" name="goods" key="key">
                    <li class="flex_in  ">
                        <a href="{:U('Index/detail',array('goods'=>$goods['id']))}">
                            <div class="summary radius5"><img src="{:get_item_imgs($goods['multimage'],1,'path')['path']}" alt=""/>
                                <div class="price">
                                    ￥<span>{$goods.price}</span>
                                </div>
                            </div>
                        </a>
                    </li>
                </goods:position>
            </ul>
        </div>
    </div>
</section>

<!--客服-->
<div class="kf"><a href="{:U('Index/kefu')}"><img src="__IMG__/tel.png"></a></div>

<include file="Public/bottom"/>
</body>
</html>
